<template>
  <div class="orders">
    <div class="top">
      <icon name="arrow-left" />
      <search
        v-model="value"
        class="search"
        shape="round"
        placeholder="请输入搜索关键词"
        input-align="left"
      />
    </div>
    <div class="tabs">
      <tabs v-model:active="activeName">
        <tab title="全部订单" name="a">
          <card
            num="1"
            price="120.00"
            title="北京千锋科技有限公司"
            thumb="http://riyo86fk6.hn-bkt.clouddn.com/%E5%B7%B4%E5%A5%B4.jpg"
          >
            <template #tags>
              <tag class="times" plain type="danger"
                >下单时间；2022年10月6日10:39:11</tag
              >
            </template>
            <template #footer>
              <Button type="danger" size="mini">删除订单</Button>
              <Button type="warning" size="mini">评价</Button>
            </template>
          </card>
        </tab>

        <tab title="代付款" name="b">
          <empty
            image="https://p1.meituan.net/dpplatform/183ab3412d6d662195c53cd964c39746156259.png"
            image-size="100"
            description="你还没有相关订单哦~"
          />
        </tab>
        <tab title="待使用" name="c">
          <empty
            image="https://p1.meituan.net/dpplatform/183ab3412d6d662195c53cd964c39746156259.png"
            image-size="100"
            description="你还没有相关订单哦~"
          />
        </tab>
        <tab title="待评价" name="d">
          <empty
            image="https://p1.meituan.net/dpplatform/183ab3412d6d662195c53cd964c39746156259.png"
            image-size="100"
            description="你还没有相关订单哦~"
          />
        </tab>
        <tab title="退款/售后" name="e">
          <empty
            image="https://p1.meituan.net/dpplatform/183ab3412d6d662195c53cd964c39746156259.png"
            image-size="100"
            description="你还没有相关订单哦~"
          />
        </tab>
      </tabs>
    </div>
    <div style="">
      <divider
        :style="{ color: '#996633', borderColor: '#993366', padding: '0 40px' }"
      >
        你可能还喜欢
      </divider>
    </div>
    <div class="blocks">
      <div class="loves" v-for="item in products">
        <router-link :to="{ name: 'DETAIL', query: { tid: item.id } }">
          <img :src="item.imgs" alt="" />
          <h4>{{ item.name }}</h4>
          <div class="lay">
            <span class="xing">
              <img src="../images/星星1.1.png" alt="" />
              <img src="../images/星星1.1.png" alt="" />
              <img src="../images/星星1.1.png" alt="" />
              <img src="../images/星星1.1.png" alt="" />
              <img src="../images/星星1.1.png" alt="" />
            </span>
            <p style="font-weight: 700">{{ item.avgPrice }}</p>
          </div>
          <div class="tabs">
            <span>{{ item.area }}</span
            ><span>{{ item.address }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { Icon, Search, Tab, Tabs, Card, Button, Divider, Empty } from 'vant'
import axios from 'axios'
import { getToken } from '../utils/tools'

const products = ref([])
//获取taken值
const a = getToken()
console.log(a, '这是token值')

axios
  .get('http://47.104.75.203:8080/api/shop/1', {
    headers: {
      Authorization: a
    }
  })
  .then((res) => {
    products.value = res.data.data
    console.log(res.data.data)
  })
</script>
<style scoped>
.tabs {
  max-height: 400px;
}

.blocks {
  width: 90%;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.loves {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: left;
  width: 45%;
}

.loves img {
  width: 100%;
}

.tabs {
  font-size: 12px;
  color: #999999;
}

.tabs span {
  margin-right: 10px;
}

.lay {
  display: flex;
  gap: 10px;
  align-items: center;
}

.xing img {
  width: 12px;
  height: 12px;
}

.van-dropdown-menu_bar {
  box-shadow: none;
}

.van-empty__image img {
  height: 100%;
}

.times {
  font-size: 12px;
  color: darkgrey;
  margin-top: 10px;
  height: 30px;
  line-height: 30px;
}

.van-card {
  width: 100%;
  height: 128px;
  border-radius: 10px;
}

.top {
  width: 90%;
  margin: 0 auto;
  display: flex;
  gap: 30px;
  align-items: center;
  background-color: #fff;
}

.van-search {
  width: 80%;
}

.van-button {
  padding: 10px;
  border-radius: 14px;
}

.van-button__text {
  color: #000;
}

.van-icon-arrow-left:before {
  font-size: 20px;
}

.van-tab__panel {
  padding: 10px 20px;
}

#van-tabs-4-0 {
  font-weight: 700;
}

.van-tab__panel {
  height: 200px;
  width: 90%;
  max-height: 200px;
  margin: 8px auto;
  border-radius: 10px;
  padding: 0;
}

.van-search {
  height: 50px;
}
</style>
